import { Input, Select, Space } from 'antd'
import React, { useState } from 'react'
import { cloneDeep } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid';
import { showTypeOptions, dataTypeOptions, SHOW_TYPE_VALUE, SHOW_TYPE_ENUM, SHOW_TYPE_ARRAY, DATA_TYPE_WSTRING, DATA_TYPE_INT8 } from './constant'
import TypeInput from './type-input'
import DynamicTable from '../dynamic-table/index.jsx'
import ArrayInput from './array-input'
import './index.less'

export function ConfigEditTable(props) {
  const { value, onChange, isMove, tableProps = {} } = props

  const [data, setData] = useState(cloneDeep(value || []))
  if (data.length == 0) {
    data.push({
      key: uuidv4(),
      // id: '',
      attrCode: 'Describe',
      attrName: '名称',
      attrContent: '',
      attrType: SHOW_TYPE_VALUE,
      dataType: DATA_TYPE_WSTRING,
      attrRange: '',
      min: null,
      max: null,
    })
  }

  let timer = null
  const updateValue = (data) => {
    let tempData = [...data]
    setData(tempData)
    if(timer) {
      clearTimeout(timer)
      timer = null
    }
    setTimeout(() => {
      onChange && onChange(tempData)
      timer = null
    }, 500);
  }

  const initRow = () => {
    let option = dataTypeOptions.find((item) => item.value == 'INT8')
    return {
      key: uuidv4(),
      // id: '',
      attrCode: '',
      attrName: '',
      attrContent: '0',
      attrType: SHOW_TYPE_VALUE,
      dataType: DATA_TYPE_INT8,
      attrRange: '',
      min: option.min,
      max: option.max
    }
  }

  const setFieldData = (index, field, value) => {
    data[index][field] = value
    updateValue(data)
  }

  const showTypeChange = (index, value) => {
    data[index].attrRange = ''
    switch(value) {
      case SHOW_TYPE_VALUE:
        data[index].attrContent = null
        break;
      case SHOW_TYPE_ENUM:
        data[index].attrContent = null
        break;
      case SHOW_TYPE_ARRAY:
        data[index].attrContent = ''
        break;    
    }
    setFieldData(index, 'attrType', value)
  }

  const dataTypeChange = (index, value) => {
    data[index].attrRange = ''
    if (value != DATA_TYPE_WSTRING) {
      let option = dataTypeOptions.find(item => item.value == value)
      data[index].min = option.min
      data[index].max = option.max
      data[index].typeMin = option.min
      data[index].typeMax = option.max
      data[index].attrContent = BigInt(0)
    } else {
      data[index].typeMin = null
      data[index].typeMax = null
      data[index].min = null
      data[index].max = null
      data[index].attrContent = ''
    }
    setFieldData(index, 'dataType', value)
  }

  const columns = [
    {
      title: '标签',
      dataIndex: 'tag',
      width: '6%',
      render:(text, record, index) => {
        return '标签' + (index + 1)
      }
    },
    {
      title: '名称',
      dataIndex: 'attrName',
      width: '10%',
      render:(text, record, index) => {
        return <Input value={text} disabled={index == 0} onChange={(e) => {
          setFieldData(index, 'attrName', e.target.value)
        }} placeholder='请输入名称' autoComplete='off'/>
      }
    },
    {
      title: '编码',
      dataIndex: 'attrCode',
      width: '10%',
      render:(text, record, index) => {
        return <Input value={text} disabled={index == 0} onChange={(e) => {
          setFieldData(index, 'attrCode', e.target.value)
        }} placeholder='请输入编码' autoComplete='off'/>
      }
    },
    {
      title: '显示类型',
      dataIndex: 'attrType',
      width: '10%',
      render:(text, record, index) => {
        return <Select options={showTypeOptions} disabled={index == 0} value={text} onChange={(value) => {
          showTypeChange(index, value)
        }}>
        </Select>
      }
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      width: '15%',
      render:(text, record, index) => {
        return <Select options={dataTypeOptions} disabled={index == 0} value={text} onChange={(value) => {
          dataTypeChange(index, value)
        }}>
        </Select>
      }
    },
    {
      title: '内容',
      dataIndex: 'attrContent',
      width: '18%',
      render:(text, record, index) => {
        let result = null
        let options = []
        switch(record.attrType) {
          case SHOW_TYPE_VALUE:
            result = <TypeInput type={record.dataType} min={record.min} max={record.max} value={text} onChange={(value) => {
              setFieldData(index,'attrContent', value)
            }}/>
            break;
          case SHOW_TYPE_ENUM:
            options = record.attrRange ? record.attrRange.split(',').map(item => { return { value: item, label: item }}) : []
            result = <Select options={ options } value={text} onChange={(value) => {
              setFieldData(index,'attrContent', value)
            }} placeholder='请选择'/>
            break;
          case SHOW_TYPE_ARRAY:
            result = <ArrayInput type={record.dataType} min={record.typeMin} max={record.typeMax} value={text} onChange={(value) => {
              setFieldData(index,'attrContent', value)
            }}/>
            break;
        }

        return result
      }
    },
    {
      title: '范围',
      dataIndex: 'attrRange',
      width: '22%',
      render:(text, record, index) => {
        let result = null

        if (record.attrType === SHOW_TYPE_VALUE && record.dataType != DATA_TYPE_WSTRING) {
          result = <Space>
              <TypeInput type={record.dataType} min={record.typeMin} max={record.max} value={record.min} onChange={(value) => {
                setFieldData(index,'min', value)
              }}/>
              <span>-</span>
              <TypeInput type={record.dataType} min={record.min} max={record.typeMax} value={record.max} onChange={(value) => {
                setFieldData(index, 'max', value)
              }}/>
            </Space>
        }

        if (record.attrType == SHOW_TYPE_ENUM) {
          result = <ArrayInput type={record.dataType} min={record.min} max={record.max} value={text} onChange={(value) => {
            setFieldData(index,'attrRange', value)
          }}/>
        }

        return result
      }
    }
  ]

  return (
    <DynamicTable data={data} columns={columns} initRow={ initRow } isMove={isMove} tableProps={tableProps} onChange={updateValue} isFirstDisabled={true}/>
  )
}

export default ConfigEditTable
